<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋信息操作</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <link href="../../res/echarts/eleTree.css" rel="stylesheet"/>
    <script src="../../res/echarts/eleTree.js"></script>
    <script src="../../res/js/login_common.js" charset="utf-8"></script>
    <style type="text/css">
        body {
            padding: 10px;
        }

        .fonts {
            line-height: 40px;
        }

        .deletes {
            width: 60px;
            height: 40px;
            /*border:1px solid;*/
            float: right;
            color: #0aafe6;
        }

        .deletes:hover {
            cursor: pointer;
            color: #bd2c00
        }
    </style>

</head>
<body>
<div class="layui-form-item">
    <input type="hidden" id="clienId" />
    <div class="layui-inline">
        <label class="layui-form-mid">客户名：</label>
        <div class="layui-input-inline" style="width: 150px;">
            <!--<input type="text" name="clientName" id="clientName" lay-verify="required" placeholder="请输入客户名（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientName">

            </div>
        </div>
        <label class="layui-form-mid">编号：</label>
        <div class="layui-input-inline" style="width: 147px;">
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientIdentity">

            </div>
        </div>
        <label class="layui-form-mid">性别：</label>
        <div class="layui-input-inline" style="width: 147px;">
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientSex">

            </div>
        </div>
        <label class="layui-form-mid">来源：</label>
        <div class="layui-input-inline" style="width: 120px;">
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientSource">

            </div>
        </div>

    </div>
</div>
<!--<div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
        &lt;!&ndash;<input type="radio" name="clientSex" value="1" title="男" checked="">
        <input type="radio" name="clientSex" value="0" title="女">&ndash;&gt;
        &lt;!&ndash;<input type="radio" name="sex" value="禁" title="禁用" disabled="">&ndash;&gt;
        <div class="fonts" id="clientSex">

        </div>
    </div>
    &lt;!&ndash;<div class="layui-inline">
        <label class="layui-form-label" style=" margin-top: 20px;margin-left:10px;font-size: 15px">选择房屋:</label>
        <div class="layui-input-inline">
            <div id="houses" style="width: 300px; margin-top: 20px;"></div>
        </div>
    </div>&ndash;&gt;
</div>-->
<div class="layui-form-item">

    <div class="layui-inline">
        <label class="layui-form-mid">业态：</label>
        <div class="layui-input-inline" style="width: 163px;">
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientIndustry">

            </div>
        </div>
        <label class="layui-form-mid">需求面积：</label>
        <div class="layui-input-inline" style="width: 120px;">
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientState">

            </div>
        </div>


        <label class="layui-form-mid">预算范围：</label>
        <div class="layui-input-inline" style="width: 120px;">
            <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
                   placeholder="请输入编号（必填）"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientMoney">

            </div>
        </div>
        <label class="layui-form-mid">电话：</label>
        <div class="layui-input-inline" style="width: 120px;">
            <!--<input type="text" name="clientPhone" id="clientPhone" placeholder="请输入电话（必填）"
                   lay-verify="required|phone"
                   autocomplete="off"
                   class="layui-input">-->
            <div class="fonts" id="clientPhone">

            </div>
            <a class="layui-btn layui-btn-xs layui-btn-normal" id="showPhone">查看</a>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-mid">备注：</label>
    <div class="layui-input-block" >
        <!--<input type="text" name="clientIdentity" id="clientIdentity" lay-verify="required"
               placeholder="请输入编号（必填）"
               autocomplete="off"
               class="layui-input">-->
        <div class="fonts" id="remark">

        </div>
    </div>
</div>

<form class="layui-form layui-form-pane" action="">
    <input type="hidden" name="sectorId" id="clientId"><!-- 客户id-->
    <input type="hidden" name="streetName" id="streetName" value="0"><!-- 1为房源，0为客户-->
    <div class="layui-form-item">
        <label class="layui-form-label">详细信息:</label>
        <div class="layui-input-block">
            <input id="sectorNames" name="sectorName" lay-verify="required" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详细信息</label>
        <div class="layui-input-block">
            <textarea id="sectorNames" name="sectorName" lay-verify="conten" style="display: none;"></textarea>
        </div>
    </div>-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</button>
        </div>
    </div>
</form>

<hr>

<div id="TenementStreet">
    <div style="font-size: 30px;margin-left: 100px">
        <div style="float: right;color: #0aafe6;:hover{cursor:pointer;color: #bd2c00}" onclick="deleteStreet()">删除</div>
        <div>用户名称</div>
        <div style="font-size: 25px;margin-top: 10px">内容</div>
        <div style="float: right;">2020-06-17</div>
        <hr>
    </div>
</div>


<script>
    var houses;
    var showPhone;
    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        // 修改赋值
        var clientId = getQueryString("clientId");
        $("#clienId").val(clientId);
        //监听提交
        form.on('submit(demo1)', function (data) {
            var url = "../../streetAction/addOrUpdate";
            /*console.info(data.field);
            var house = houses.getValue()
            if (house.length > 0) {
                $.each(houses.getValue(), function (index, item) {
                    house.push(item.value + "_" + item.name)
                })
            }
            data.field.houseId = house;*/


            $.post(url, data.field, function (obj) {
                if (obj.num == 1) {
                    //window.parent.location.reload();//刷新父页面
                    //window.location.reload();//刷新页面
                    /*var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);*/
                    showStreet(clientId);
                    layer.msg("新增成功", {icon: 1});
                    $("#sectorNames").val("");
                }else{
                    layer.msg("新增失败", {icon: 2});
                }
            }, "json");
            return false;
        });

        //设置文本域
        //layedit = layui.layedit, $ = layui.jquery;
        /*var index = layedit.build('sectorNames', {
            tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link', 'unlink', 'face'],//设置需要的控件
            height: 260 //设置高度
        });*/

        /*//加载组件
        layui.config({
            base: '../../res/echarts/'
        }).extend({
            xmSelect: 'xm-select'
        }).use(['xmSelect'], function () {
            var xmSelect = layui.xmSelect;
            var url = "../../houseOrClientAction/selectHouseAll";
            var datas = null;
            if (clientId) {
                datas = {"id": clientId};
            }
            $.post(url, datas, function (obj) {
                //渲染多选
                houses = xmSelect.render({
                    el: '#houses',
                    data: obj
                })
            }, "json")
        });*/

        //下拉复选框取值
        /*$("#demo1-getValue").on("click", function () {
            var selectArr = clients.getValue();

            console.info(selectArr);
        });*/
        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });


        showStreet(clientId);
        setInterval("showStreet()",3000);
        if (clientId) {
            $("#clientId").val(clientId);
            var url = "../../clientAction/findById";
            var data = {"id": clientId};
            $.post(url, data, function (obj) {
                $("#clientName").html(obj.clientName);                          // 客户名称
                $("#clientIdentity").html(obj.clientIdentity);                  // 编号
                $("#clientPhone").html(clientPhones(obj.clientPhone));          // 电话
                $("#clientState").html(obj.clientState+"㎡-"+obj.clientStates+"㎡");   // 需求面积
                $("#clientIndustry").html(obj.clientIndustry);                  // 业态
                $("#clientMoney").html(obj.clientMoney + "-" + obj.clientPayment);  // 金额范围
                //$("#clientPayment").val();                                    // 最高金额
                $("#remark").html(obj.remark);
                $("#clientSource").html(obj.clientSource);                      // 来源
                //$("#remark").val(obj.remark);                                 // 备注
                showPhone=obj.clientPhone;

                $("#clientSex").html(obj.clientSex == 0 ? "女" : "男"); // 性别
                /*$("input[name=clientState][value='0']").attr("checked", obj.clientState == 0 ? true : false);
                $("input[name=clientState][value='1']").attr("checked", obj.clientState == 1 ? true : false);
                $("input[name=clientPayment][value='0']").attr("checked", obj.clientPayment == 0 ? true : false);
                $("input[name=clientPayment][value='1']").attr("checked", obj.clientPayment == 1 ? true : false);
                $("input[name=clientPayment][value='2']").attr("checked", obj.clientPayment == 2 ? true : false);
                $("input[name=clientPayment][value='3']").attr("checked", obj.clientPayment == 3 ? true : false);
                clients.setValue();*/
                form.render();
            }, "json")

            $("#showPhone").on("click",function () {

                var url="../../streetAction/addOrUpdate";
                var data={streetName:0,sectorId:clientId,sectorName:"查看电话"};
                $.post(url,data,function (obj) {
                    if(obj.num>0){
                        $("#clientPhone").html('<a href="tel://'+showPhone+'" style="color: #00aeff">'+showPhone+'</a>');
                        showStreet(clientId);
                    }

                },"json");
            })

        }

        /*form.verify({
            conten: function (value) {
                return layedit.sync(index);
            }
        });*/

        form.render();
    });

    function clientPhones(clientPhone) {
        var phone=clientPhone.substr(0,3);
        var backphone=clientPhone.substr(7,4);
        return phone+"****"+backphone;
    }

    function showStreet(clientId) {
        var data={};
        if(clientId){
            data={sectorId: clientId, streetName: "0"}
        }else{
            data={sectorId: $("#clienId").val(), streetName: "0"}
        }
        var url = "../../streetAction/findAll";

        $.post(url, data, function (obj) {
            $("#TenementStreet").html("");
            $.each(obj, function (index, item) {
                console.info(window.loginObj.manager.userType)
                if (window.loginObj.manager.userType == 2) {
                    $("#TenementStreet").append('<div style="font-size: 20px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 15px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;font-size: 20px">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                } else {
                    $("#TenementStreet").append('<div style="font-size: 20px;margin-left: 100px;margin-right: 50px"><div class="deletes" onclick="deleteStreet(\'' + item.streetId + '\')">删除</div><div>' + item.userName + '</div><div style="font-size: 15px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;font-size: 20px">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                }
            })
        }, "json");

    }


    function deleteStreet(streetId) {
        console.info(streetId);
        var url = "../../streetAction/deleteById";
        $.post(url,{id:streetId},function (obj) {
            if(obj.num==1){
                window.location.reload();//刷新页面
                layer.msg("删除成功")
            }else{
                layer.msg("删除失败")
            }

        },"json")
    }
</script>
<script type="text/javascript">
    /**
     * 修改日历格式
     * @param dates
     * @returns {string}
     */
    function setDate(dates) {
        var date = new Date(dates);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var sdate = date.getFullYear() + "-"
        if (month < 10) {
            sdate += "0" + month + "-";
        } else {
            sdate += month + "-";
        }
        if (day < 10) {
            sdate += "0" + day;
        } else {
            sdate += day;
        }
        return sdate;
    }
</script>
</body>
</html>